<!-- 考试报名 -->
<template>
    <Progress :status="status" :list="list" :title="title"></Progress>
    <!-- 提交注册 -->
    <el-form v-show="status == 0" :rules="rules" :model="examParam" ref="ruleFormRef" label-width="auto"
        style="max-width: 600px;margin: 0 auto;">
        <el-form-item label="报考项目：" prop="projectId">
            <el-select v-model="examParam.projectId" placeholder="请选择报考项目" @change="findLevelList" size="large">
                <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="报考等级：" prop="levelId">
            <el-select v-model="examParam.levelId" placeholder="请选择报考等级" @change="findShowingsList" size="large">
                <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="报考场次：" prop="showingsId">
            <el-select v-model="examParam.showingsId" placeholder="请选择报考场次" @change="findShowingsCity" size="large">
                <el-option v-for="item in showingsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="报考城市：">
            <!-- <el-select v-model="examParam.city" placeholder="请选择报考城市">
                <el-option label="线上" value="线上" />
                <el-option label="线下" value="线下" />
            </el-select> -->
            <el-input v-model="examParam.city" :disabled="true" />
        </el-form-item>
        <el-form-item label="报考模块：" prop="courseIds">
            <el-select v-model="examParam.courseIds" placeholder="请选择报考模块：" multiple  size="large">
                <el-option v-for="item in courseData" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item>

            <div class="btn_all" data-popname="1">
                <el-button class="btn_step1" @click="onSubmit(ruleFormRef)" :loading="isLoading">提交报名信息</el-button>
            </div>
        </el-form-item>


    </el-form>
    <!-- 信息确认 -->
    <div v-show="status == 1">
        <PersonalInfo></PersonalInfo>
        <h3>考试信息</h3>

        <!-- <el-table class="ksboxsrc" :data="courseArray" border style="width: 100%">
            <el-table-column prop="projectName" label="考试项目" align="center" />
            <el-table-column prop="courseDate" label="考试时间" align="center" />
            <el-table-column prop="city" label="考试地点" align="center" />
            <el-table-column prop="name" label="考试模块" align="center" />
        </el-table> -->

        <div class="ksboxsrc">
            <table>
                <tbody>
                    <tr>
                        <th>考试项目</th>
                        <th>考试时间</th>
                        <th>考试地点</th>
                        <th>考试模块</th>
                    </tr>
                    <tr v-for="item in courseArray" v-bind:key="item.id">
                        <td v-text="item.projectName" style="width: 160px;"></td>
                        <td v-text="item.courseDate"></td>
                        <td v-text="item.city"></td>
                        <td v-text="item.name"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <form method="post">
            <h6>
                <input type="checkbox" :checked="isChecked" data-val="true" id="IsCheck" name="IsCheck" value="true">
                已阅读，遵守并同意签署<a href="">《IFFA职业道德准则》</a>
            </h6>
            <!-- 下一步按钮 -->
            <div class="btn_all" data-popname="1">
                <a class="btn_step" @click="preStep">上一步</a>
                <a class="btn_step" @click="nextStep">下一步</a>
            </div>
        </form>
    </div>
    <!-- 缴费信息 -->
    <div v-show="status == 2">
        <h3>费用缴纳</h3>
        <Pay :examParam="examParam" @paySuccess="paySuccess" ref="childPay"></Pay>
        <div class="btn_all" data-popname="1">
            <a class="btn_step" @click="prePayStep">上一步</a>
            <a class="btn_step" @click="pay">确认支付</a>
        </div>
    </div>
    <!-- 完成-->
    <div v-show="status == 3">
        <el-result
        icon="success"
        title="支付成功"
        
      >
         
      </el-result>
    </div>
</template>
<script setup lang="ts">
import { FormRules, FormInstance } from "element-plus";
import type { ExamParam, ShowingsModel, ProjectModel, LevelModel, CourseModel,CourseParam } from "../../api/person/exam"
import { projectListApi, levelListApi, showingsListApi, courseListApi,courseApi } from "../../api/person/exam"
const isLoading = ref<boolean>(false)
const ruleFormRef = ref<FormInstance>();
const isChecked = ref<boolean>(true)
const examParam = ref<ExamParam>({
    projectId: '',
    levelId: '',
    showingsId: '',
    city: '',
    amount: '',
    courseIds:''
})
const list = ref(["考试申请", "信息确认", "缴纳费用", "完成报名"]);
const title = ref<string>("考试注册")
const rules = reactive<FormRules<ExamParam>>({
    projectId: [
        { required: true, message: '请选择报考项目', trigger: 'change' },
    ],
    levelId: [
        { required: true, message: '请选择报考等级', trigger: 'change' },
    ],
    showingsId: [
        { required: true, message: '请选择报考场次', trigger: 'change' },
    ],
    courseIds:[
        { required: true, message: '请选择报考模块', trigger: 'change' },
    ]

});
const status = ref<number>(0)
//报考等级
const levelList = ref<LevelModel[]>([])
const showingsList = ref<ShowingsModel[]>()
const projectList = ref<ProjectModel[]>([])

onMounted(async () => {
    const response = await projectListApi()
    if (response.code === 200) {
        projectList.value = response.data ?? []
    } else {
        ElMessage.error(response.msg)
    }
})
async function findLevelList() {
    levelList.value = []
    showingsList.value = []
    examParam.value.levelId=''
    examParam.value.showingsId=''
    const res = await levelListApi(examParam.value.projectId)
    if (res.code === 200) {
        levelList.value = res.data ?? []
    } else {
        ElMessage.error(res.msg)
    }
}

async function findShowingsList() {
    examParam.value.showingsId=''
    showingsList.value = []
    const res = await showingsListApi(examParam.value.projectId, examParam.value.levelId)
    if (res.code === 200) {
        showingsList.value = res.data ?? []
    } else {
        ElMessage.error(res.msg)
    }

}
async function findShowingsCity() {
    const showings = showingsList.value?.find(item => item.id === examParam.value.showingsId)
    console.log(showings, 'showings')
    examParam.value.city = showings?.city ?? ''
    const response = await courseListApi(examParam.value.showingsId)
    if (response.code === 200) {
        courseData.value = response.data ?? []
    } else {
        ElMessage.error(response.msg)
    }
}

const courseData = ref<CourseModel[]>([])

const courseArray=ref<CourseModel[]>([])
const courseParam=ref<CourseParam>({ids:''})
//提交报名信息
async function onSubmit(formEl: FormInstance | undefined) {
    if (!formEl) return;
    await formEl.validate(async (valid, fields) => {
        if (valid) {
                status.value = 1 
                courseParam.value.ids=examParam.value.courseIds
                const response=await courseApi(courseParam.value)
                if(response.code==200){
                    courseArray.value=response.data as CourseModel[]
                }
        } else {
            console.log("error submit!", fields);
        }
    });
}

//考试模块



//上一步
function preStep() {
    status.value = 0
}

//下一步
function nextStep() {
    status.value = 2
    let sum=0
    for (let i = 0; i < courseArray.value.length; i++) {
        sum+=Number(courseArray.value[i].amount)
    }
    examParam.value.amount=sum
 
}
const childPay = ref<any>()
function prePayStep() {

    status.value = 1
}

function pay() {
    childPay.value?.payType(examParam.value)
    status.value = 3
}

//支付成功返回的方法
function paySuccess() {
    status.value = 3
}

</script>
<style scoped lang='less'>
:deep(.el-form-item__content) {
    justify-content: center;
}

h3 {
    font-size: 28px;
    line-height: 1;
    color: #345aa3;
    padding-bottom: 19px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    text-align: left;
    padding-left: 25px;
}

.ksboxsrc {
    overflow: hidden;
    overflow-x: auto;
}

.ksboxsrc table {
    width: 100%;
    width: 539px;
    margin: 0 auto;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.ksboxsrc table tr th {
    font-size: 18px;
    line-height: 48px;
    text-align: center;
    color: #ffffff;
    background-color: #345aa3;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.ksboxsrc table tr th {
    font-size: 18px;
    line-height: 48px;
    text-align: center;
    color: #ffffff;
    background-color: #345aa3;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.ksboxsrc table tr td:nth-of-type(1),
.ksboxsrc table tr td:nth-of-type(3) {
    width: 129px;
}

.ksboxsrc table tr td {
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    color: #444444;
    background-color: rgba(238, 238, 238, 0.5);
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

h6 {
    font-size: 14px;
    color: #999999;
    text-align: center;
    margin-top: 40px;
}

button,
input,
optgroup,
option,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    outline: 0;
}

h6 a {
    color: #2379be;
    text-decoration: underline;
}

.btn_all {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    max-width: 500px;
    margin: 0 auto;
}

.btn_step {
    margin: 20px 10px 0;
    display: block;
    width: 213px;
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin: 30px auto 0;
    background-color: #345aa3;
    cursor: pointer;
}

.btn_step1 {
    margin: 20px 10px 0;
    display: block;
    width: 213px;
    height: 48px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin: 30px auto 0;
    background-color: #345aa3;
    cursor: pointer;
}
</style>
